<template>
    <view class="container">
        <!-- 顶部图片 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
            <swiper-item class="banner" v-for="(item2, index2) in info.details_images" :key="index2">
                <view class="banner">
                    <image class="banner" :src="$getimgsrc(item2)" style=""></image>
                </view>
            </swiper-item>
        </swiper>
        <view style="height: 480rpx; position: relative; z-index: 9"></view>
        <view class="bottom">
            <!-- 标题 -->
            <view class="top">
                <text style="font-size: 30rpx; font-weight: 700">{{ info.title }}</text>
                <view class="num">
                    <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
                    <text class="text_0">时间: {{ util.timeChange2(info.starttime) }} - {{ util.timeChange2(info.endtime) }}</text>
                </view>
                <view class="num">
                    <image class="two" src="@/static/myimg/a14.png" style="vertical-align: top"></image>
                    <text style="display: inline-block; width: 80rpx; margin: 0 0 0 10rpx">地点:</text>
                    <text class="text_0">{{ info.address }}</text>
                </view>
            </view>
            <!-- 人数 -->
            <view class="number">
                <view class="top_0">
                    <view class="num">
                        <view>
                            <image class="two" src="@/static/myimg/a12.png"></image>
                            <text>人数 {{ info.join_num }}/{{ info.num }}</text>
                        </view>
                        <view>
                            <view class="color">
                                <image src="@/static/myimg/a11.png" style="width: 100rpx; height: 40rpx"></image>
                                <text>{{ info.girl_num }}</text>
                            </view>
                            <view class="color" style="margin-left: 10rpx">
                                <image src="@/static/myimg/a10.png" style="width: 100rpx; height: 40rpx"></image>
                                <text>{{ info.male_num }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="bottom_0">
                    <image :src="$getimgsrc(item.avatar)" v-if="index < 6" v-for="(item, index) in info.userlist" :key="index" />
                </view>
            </view>
            <!-- 发起者 -->
            <view class="self">
                <view class="num">
                    <view>
                        <image class="two" src="@/static/myimg/a16.png" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
                        <text style="display: inline-block; height: 100%; line-height: 40rpx; margin: 0 30rpx 0 10rpx">发起者</text>
                    </view>
                </view>
                <view class="picture">
                    <view class="left">
                        <image :src="$getimgsrc(info.avatar)" style="margin-left: 0" />

                        <text style="margin-left: 20rpx">{{ info.nickname }}</text>
                    </view>
                    <view class="right" style="background-color: #feff01" @click="upload">私信TA</view>
                </view>
            </view>
            <!-- 详情 -->
            <view class="details">
                <text style="font-weight: 700; display: block; margin-bottom: 30rpx">详情</text>
                <view style="line-height: 50rpx">
                    {{ info.content || '' }}
                </view>
                <image v-for="(item, index) in info.details_images" :src="$getimgsrc(item)" mode=""></image>
            </view>
            <!-- 提示 -->
            <view class="tips">
                <view class="num">
                    <view>
                        <image class="two" src="@/static/myimg/a17.png" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
                        <text style="display: inline-block; height: 100%; line-height: 40rpx; margin: 0 30rpx 0 10rpx; font-weight: 700">温馨提示</text>
                    </view>
                </view>
                <view class="text">
                    <text>1、本次活动名额有限，先报先得。</text>
                    <text>2、报名成功后请按时参与，因特殊原因情况不能到场可提前联系发起者取消。</text>
                </view>
            </view>
        </view>
        <view class="" style="height: 300rpx"></view>
        <view class="btn" v-if="info.status == 1">
            <view class="creatact">审核中</view>
        </view>
        <view class="btn" v-if="info.status == 3">
            <view class="creatact" style="background-color: #ff3742" @click="yuanying">审核未通过，查看原因</view>
        </view>
        <uni-popup ref="popup" type="center">
            <view class="" style="width: 570rpx; background-color: #ffffff; border-radius: 20rpx; text-align: center">
                <view class="" style="padding: 30rpx 0rpx">未通过原因</view>
                <view class="" style="font-weight: bold; padding: 0rpx 0rpx 30rpx 0rpx">{{ info.refuse || '' }}</view>
                <view class="" style="border-top: 1rpx solid #e8e8e8; padding: 30rpx" @click="$refs.popup.close()">
                    <text>我知道了</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            info: {}
        };
    },
    onLoad(data) {
        this.id = data.id;
        this.getinfo();
    },
    methods: {
        yuanying() {
            this.$refs.popup.open();
        },
        getinfo() {
            this.http('/doings/details', {
                doings_id: this.id
            }).then((res) => {
                this.info = res.data;
            });
        },
        // 跳转私信
        upload() {
            console.log('跳转私信');
        }
    }
};
</script>

<style lang="scss">
.banner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 500rpx;
    background-color: saddlebrown;
    z-index: 10;
}
.bottom {
    width: 100%;
    height: 100%;
    border-radius: 50rpx 50rpx 0 0;
    background-color: #f8f8f8;
    margin-top: -20rpx;
    position: relative;
    z-index: 11;
    .top {
        height: 100%;
        padding: 30rpx;
        background-color: #fff;
        border-radius: 50rpx 50rpx 0 0;
        margin-bottom: 20rpx;
        .num {
            margin-top: 30rpx;
            .two {
                width: 40rpx;
                height: 40rpx;
                vertical-align: bottom;
            }
            text {
                display: inline-block;
                height: 100%;
                line-height: 40rpx;
                margin: 0 30rpx 0 10rpx;
                // 限制长度
            }
            .text_0 {
                width: 500rpx;
                vertical-align: top;
            }
            .color {
                display: inline-block;
                position: relative;
                image {
                    vertical-align: top;
                }
                text {
                    position: absolute;
                    right: 0;
                    color: #ffffff;
                }
            }
        }
    }
    .number {
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 30rpx;
        .num {
            display: flex;
            justify-content: space-between;
            margin: 10rpx 0;
            .two {
                width: 40rpx;
                height: 40rpx;
                vertical-align: bottom;
            }
            text {
                display: inline-block;
                height: 100%;
                line-height: 40rpx;
                margin: 0 30rpx 0 10rpx;
                // 限制长度
            }
            .text_0 {
                width: 300rpx;
                font-size: 24rpx;
                vertical-align: top;
            }
            .color {
                display: inline-block;
                position: relative;
                image {
                    vertical-align: top;
                }
                text {
                    position: absolute;
                    right: 0;
                    color: #ffffff;
                }
            }
        }
        .bottom_0 {
            margin-top: 30rpx;
            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 40rpx;
                margin-left: -20rpx;
                vertical-align: middle;
            }
        }
    }
    .self {
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 30rpx;
        .picture {
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
            .left {
                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 40rpx;
                    margin-left: -20rpx;
                    vertical-align: middle;
                }
            }
            .right {
                width: 160rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;

                border-radius: 20rpx;
            }
        }
    }
    .details {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
            margin: 10rpx;
        }
    }
    .tips {
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 30rpx;
        .text {
            text {
                display: block;
                margin: 20rpx 0;
            }
        }
    }
}
.btn {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
    padding: 8rpx 30rpx;
    z-index: 99;
    .creatact {
        width: 690rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        background: #cccfdb;
        font-weight: bold;
        color: #fff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
}
</style>
